<template>
  <div class="container">
    <div
      class="home-header-nav"
      :class="tempData.templateType !== 5 ? 'header-nav-other' : ''">
      <div v-if="fileSpace" class="home-bar" :class="tabLayer ? 'layer-on' : ''"
        @click="$pt.navigateTo({url: '/pages/home/search/main'})">
        <div class="home-search flex flex-center mar-l-15 mar-r-15">
          <van-icon name="search" color="#aeaeae" size="14px" class="mar-r-5 mar-t-2"/>
          <p class="font-12">搜索商品名称</p>
        </div>
      </div>
      <div v-if="fileSpace && tempData.templateType === 5" class="tab-menu">        
        <scroll-view
          class="horizontal-bar flex"
          :scroll-into-view="'category-top-' + currentCategory.categoryId"
          :scroll-x="true">
          <div
            class="item-bar flex-item"
            :id="leftMenuClick ? '' : 'category-top-' + item.categoryId"
            :class="{'item-bar--active': activeIndex === index}"
            v-for="(item, index) in listCategory"
            :key="index"
            @click="tabClick(item, index)">
              <div class="item-txt">
                {{item.categoryName}}
                <div :class="{'leftline': activeIndex === index}"></div>
              </div>              
          </div>
        </scroll-view>
        <div v-if="fileSpace" class="tab-more" :class="iosType ? '' : 'tab-more-and'" @click="tabLayerShow"
          :style="'background: url(' + fileSpace + '/images/w-icon-catedown-5.png) no-repeat'"></div>
        <div v-if="tabLayer" class="tab-layer">
          <div class="flex v-align-c tab-layer-top pad-l-15 pad-r-15 pad-t-5 pad-b-5">
            <label class="flex-item font-14">全部分类</label>
            <div class="width-40 height-40 flex flex-center" @click="tabLayerHide">
              <icon class="iconfont icon-arrow-right font-color-9"></icon>
            </div>
          </div>
          <ul>
            <li
              v-for="(item, index) in listCategory"
              :key="index"
              :class="item.show ? 'actived' : ''"
              @click="tabLabelClick(item, index)"
              class="font-12">{{ item.categoryName }}</li>
          </ul>
        </div>
      </div>
    </div>    
    <template v-if="tempData.templateType === 5">
      <div class="height-84"></div>
      <div v-if="tabLayer" @click="tabLayerHide" class="tab-layer-bg"></div>      
      <div class="pad-l-10 pad-r-10 pad-t-13 pad-b-13">
        <div class="module-box">
          <template v-if="!dataNone">
            <ul>
              <li v-for="(item, index) in listData" :key="index"
                @click="pageTo(item)" class="flex">
                <div class="pic-box">
                  <div class="width-124 height-124 pos-rel">
                    <!-- 跨境图标 -->
                    <div class="cross-border-pic">
                      <!-- 跨境保税 -->
                      <img
                        v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                        :src="fileSpace + '/images/icon-cross-border-s.png'"
                        class="icon-cross-border cross-s"
                        alt="">
                      <!-- 海外直邮 -->
                      <img
                        v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                        :src="fileSpace + '/images/icon-cross-border-s-22.png'"
                        class="icon-cross-border cross-s"
                        alt="">
                    </div>
                    <img v-if="item.mainImage" class="img-main width-124 height-124"
                      :src="item.mainImage + '?imageView2/1/w/690/h/690'" mode="aspectFill"/>
                  </div>
                  <template v-if="item.stock === 0">
                    <div class="del-layer stock-none">
                      <label>
                        <span>已售完</span>
                        <i class="font-9">SOLD OUT</i>
                      </label>
                    </div>
                    <div class="del-layer-bg"></div>
                  </template>
                </div>
                <div class="detail-box flex-item">
                  <div class="desc font-15 font-w mar-b-0">
                    {{ item.title }}
                  </div>
                  <div class="tag-number font-12 pad-l-4 pad-r-4 pad-t-2 pad-b-2">{{ item.wholesaleNum }}{{ item.unit ? item.unit : '件' }}起批</div>
                  <div class="flex v-align-c mar-t-30 pad-t-2">
                    <label class="price flex-item" v-if="getCustomerId && wholesaleAuthority">
                      <span class="font-15">￥</span>
                      <span class="font-23">{{ item.wholesalePrice }}</span>
                    </label>
                    <div v-else class="price flex-item">
                      <img v-if="fileSpace" :src="fileSpace + '/images/unlock.png'" alt="" class="width-62 height-16">
                    </div>
                    <p class="font-12">批发价</p>
                  </div>
                </div>
              </li>
            </ul>
            <div v-if="finishedLine" class="pad-t-15 pad-b-15 mar-b--13">
              <base-line title="到底了" txtColor="#aaaaaa" lineColor="#bbbbbb"></base-line>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-else>
      <!-- 分类模板2开始 -->
      <template v-if="subTab.length !== 0">
        <div
        v-if="tempData.templateType === 2"
        class="sub-tab bg-color-white"
        :style="{top:spaceToBarHeight + 20 +'rpx'}" :class="iosType ? 'height-51' : 'height-52'">
          <van-tabs :active="activeSub" @change="tabSubClick" color="#fb5e5e" :border="false">
            <div v-for="(item, index) in subTab" :key="index">
              <van-tab :title="item.categoryName"></van-tab>
            </div>
          </van-tabs>
          <div v-if="fileSpace" class="tab-more flex flex-center" :class="iosType ? '' : 'tab-more-and'" @click="tabSubShow">
            <img v-if="fileSpace" class="width-36 height-36" :class="subMore ? 'rotate' : ''" :src="fileSpace + '/images/icon-sub-down-2.png'" alt="">
          </div>
        </div>
        <div v-if="subMore" class="sub-tab-layer">
          <ul :style="{top: spaceToBarHeight + 115 +'rpx', paddingTop: bScreeSpace + 13 +'rpx'}">
            <li class="font-12"
              :style="{color:activeSub === index ? '#fb5e5e' :'', background:activeSub === index ? '#fff' :'',borderColor:activeSub === index ? '#fb5e5e' :'',}"
              @click="subTabLayer(index, item)" v-for="(item, index) in subTab" :key="index">{{ item.categoryName }}</li>
          </ul>
          <div class="sub-layer-bg" :style="{top: spaceToBarHeight + 20 +'rpx'}" @click="subMore = false"></div>
        </div>
      </template>
      <!-- 分类模板2结束 -->
      <div class="main" v-if="categoryNull === false">
        <scroll-view
          class="left-bar"
          :scroll-into-view="'category-' + currentCategory.categoryId"
          :scroll-y="true"
          :style="{
            top:spaceToBarHeight + 20 +'rpx',
            height: 'calc(100vh - ' + (spaceToBarHeight - 20) + 'px)'}">
          <div
            class="item-bar"
            :id="leftMenuClick ? '' : 'category-' + item.categoryId"
            :class="{'item-bar--active': activeIndex === index}"
            v-for="(item, index) in listCategory"
            :key="index"
            @click="activeClick(index, item)">
              {{item.categoryName}}
              <div :class="{'leftline': activeIndex === index}" :style="{'background':'#fb5e5e'}"></div>
          </div>
        </scroll-view>
        <scroll-view
          class="right-bar"
          @scrolltolower="scrollLower"
          :scroll-y="true"
          :style="{
            top:spaceToBarHeight + 20 +'rpx',
            height: 'calc(100vh - ' + (spaceToBarHeight - 20) + 'px)'}">
          <div v-if="tempData.templateType === 2" class="height-51"></div>
          <div v-if="tempData.templateType === 3 || tempData.templateType === 4" class="pad-t-10"></div>
          <template v-if="tempData.templateType === 1 || tempData.templateType === 2">
            <div class="shop-bar mar-t--3" v-for="(item, index) in listData" :key="index" @click="pageTo(item)">
              <div class="img-item-box pos-rel">
                <div v-if="item.stock === 0" class="sell-out">
                  <div class="del-layer align-c">
                    <div class="font-14">已售完</div>
                    <div class="font-9 mar-t--2">SOLD OUT</div>
                  </div>
                </div>
                <!-- 跨境图标 -->
                <div class="cross-border-pic">
                  <!-- 跨境保税 -->
                  <img
                    v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                    :src="fileSpace + '/images/icon-cross-border-s.png'"
                    class="icon-cross-border cross-s"
                    alt="">
                  <!-- 海外直邮 -->
                  <img
                    v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                    :src="fileSpace + '/images/icon-cross-border-s-22.png'"
                    class="icon-cross-border cross-s"
                    alt="">
                </div>
                <img v-if="item.mainImage" :src="item.mainImage + '?imageView2/1/w/300/h/300'" mode="aspectFill" class="img-item" />
              </div>
              <div class="content-item-box">
                <div class="content-title line-2 mar-t--2">{{item.title}}</div>
                <div class="content-foot">
                  <div class="height-17 mar-t--5"></div>
                  <div class="price-row mar-t--5">
                    <div class="price-box mar-t--6">
                      <span v-if="getCustomerId && wholesaleAuthority" class="price cate-price min-short-w">
                        <span class="font-12">¥</span>{{ item.wholesalePrice }}
                      </span>
                      <span v-else class="price cate-price min-short-w">
                        <img v-if="fileSpace" :src="fileSpace + '/images/unlock.png'" alt="" class="width-62 height-16">
                      </span>
                    </div>
                    <div class="font-12 height-36 mar-r--10"></div>
                  </div>
                </div>
              </div>
            </div>
          </template>
          <!-- 分类模板3、4开始 -->
          <template v-else>
            <div class="temp-subcat-list" :class="tempData.templateType === 4 ? 'pad-b-11' : ''" v-for="(secItem, secIndex) in subTab" :key="secIndex">
              <h2 v-if="tempData.templateType === 4" class="pad-b-11">{{secItem.categoryName}}</h2>
              <ul class="text-align-l">
                <template v-for="(thrItem, thrIndex) in secItem.children">
                  <li :key="thrIndex" @click="goShopAllPage(thrItem)">
                    <img v-if="thrItem.categoryImage" mode="aspectFill" class="width-80 height-80" :src="thrItem.categoryImage + '?imageView2/1/w/160/h/160'" />
                    <img v-if="!thrItem.categoryImage && fileSpace" :src="fileSpace + '/images/default-category.png'" class="width-80 height-80" alt="">
                    <div class="font-13 pad-t-6 pad-b-6">{{thrItem.categoryName}}</div>
                  </li>
                  <li v-if="(thrIndex + 1) % 3 == 0" class="clear-li" :key="thrIndex"></li>
                </template>
              </ul>
            </div>
          </template>
          <!-- 分类模板3、4结束 -->
          <!-- 暂无数据 -->
          <div class="nodata" v-if="shopSortNull">
            <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-274 height-65" alt="">
            <div class="align-c mar-t-20 font-16 font-color-6">
              暂无数据~
            </div>
          </div>
          <div v-if="finishedLine" class="base-line-shop pad-t-15 pad-b-15">
            <base-line title='我是有底线滴'></base-line>
          </div>
        </scroll-view>
      </div>
    </template>
    <!-- 暂无数据 -->
    <div class="category-nodata category-nosetting" v-if="categoryNull">
      <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
      <div class="align-c mar-t-5 font-16 font-color-6">
        暂无数据~
      </div>
    </div>
    <!-- <div class="nodata" v-if="dataNone && tempData.templateType === 5">
      <img v-if="fileSpace" :src="fileSpace + '/images/w-icon-datanone-2.png'" class="width-118 height-102" alt="">
      <div class="align-c mar-t-15 font-17">暂无数据</div>
    </div> -->
  </div>
</template>

<script>
  import headerNav from '@/components/headerNav'
  import baseLine from '@/components/BaseLine'
  import {
    getMemberInfo,
    pageProjectGoodsByMemberId
  } from '@/api/home'
  import {
    categoryTemplate,
    listOneGoodsCategory,
    listNextCategoryByParentId
  } from '@/api/shop'
  import { setShowBuyCard, setMemberId, setEnterpriseId, setCategoryInfo } from '@/utils/auth'
  import { getAuth } from '@/api/login'

  export default {
    components: { headerNav, baseLine },
    data() {
      return {
        spaceBarHeight: 0,
        listCategory: [],
        listData: [],
        dataNone: false,
        tabLayer: false,
        memberInfo: {
          memberDetails: {}
        },
        customerInfo: {
          memberDetails: {}
        },
        pageLoad: true,
        finishedLine: false,
        finishedEls: false,
        categoryId: '',
        currentPage: 1,
        pullLoad: {
          loading: false,
          finished: false
        },
        listQuery: {
          categoryId: '',
          title: '',
          memberId: '',
          currentPage: 1,
          size: 10
        },
        appInfo: {},
        iosType: false,
        activeIndex: 0,
        leftMenuClick: false,
        shopSortNull: false,
        categoryNull: false,
        listBanner: [],
        isPreview: true,
        hasCategory: false,
        currentCategory: {
          categoryId: null,
          enterpriseCategoryId: null,
          posterUrl: null,
          linkParams: null,
          linkType: null
        },
        subTab: [],
        subMore: false,
        tempData: {
          quickBuy: 1,
          templateType: 1
        },
        currentTemp: null,
        statusBarHeight: 0,
        barHeight: 0,
        spaceToBarHeight: 0,
        statusBarTop: 0,
        activeSub: 0,
        menuHeight: 0,
        bScreeSpace: 0,
        linkList: {
          1001: '/pages/personal/coupon/coupon-center/main', // 领券中心
          1002: '/pages/contact-btn/main', // 微信客服
          1004: '/pages/shop/main', // 分类链接
          1005: '/pages/home/main', // 首页
          1006: '/pages/shop/main', // 分类
          1007: '/pages/shop/cart/main', // 购物车
          1008: '/pages/personal/main', // 个人中心
          1009: '/pages/home/content-center/main', // 内容中心
          1101: '/pages/home/second-custom/main', // 自定义页面
          1401: '/pages/home/live-list/main', // 直播列表
          1501: '/pages/home/default-seckill/main', // 限时秒杀
          2001: '/pages/shop/detail/main', // 商品详情
          4001: '/pages/home/content-center/content-detail/main' // 内容中心详情
        },
        wholesaleAuthority: ''
      }
    },
    onLoad(options) {
      // 初始化data
      Object.assign(this.$data, this.$options.data())
      this.wholesaleAuthority = this.$pt.getStorageSync('wholesaleAuthority')
      this.memberInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
      this.customerInfo.avatar = 'https://veekrayimg.joinsun.vip/head-portrait.png'
      this.spaceBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.appInfo = this.$pt.getStorageSync('appInfo')
      this.getAuth()
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') !== -1) {
        this.iosType = true
      }
    },
    mounted() {
      // 获取胶囊按钮信息
      let menuButtonInfo = wx.getMenuButtonBoundingClientRect()
      // 设备信息
      let devInfo = this.$pt.getSystemInfoSync()
      // 整个导航栏高度
      this.spaceToBarHeight = devInfo['statusBarHeight'] + menuButtonInfo['height'] + (menuButtonInfo['top'] - devInfo['statusBarHeight']) * 2
      this.statusBarHeight = this.$pt.getSystemInfoSync()['statusBarHeight'] + 44
      this.barHeight = this.statusBarHeight - 2
      this.statusBarTop = this.statusBarHeight - 42
      let sysInfo = ''
      sysInfo = this.$pt.getSystemInfoSync()
      if (sysInfo.system.indexOf('iOS') !== -1) {
        this.iosType = true
        // android类型
        this.statusBarTop = this.statusBarHeight - 40
        this.barHeight = this.statusBarHeight - 4
      }
    },
    onShow() {
      // 链接选择器分类跳转进入
      this.wholesaleAuthority = this.$pt.getStorageSync('wholesaleAuthority')
      this.finishedEls = false
      this.leftMenuClick = false
      this.categoryId = ''
      if (this.$pt.getStorageSync('categoryInfo')) {
        this.leftMenuClick = false
        this.categoryId = this.$pt.getStorageSync('categoryInfo').categoryId
      } else {
        this.leftMenuClick = true
      }
      const reporter = this.getCurrentPage().page.__displayReporter.showReferpagepath
      if (this.pageLoad || reporter !== 'pages/shop/detail/main.html') {
        this.$pt.pageScrollTo({
          scrollTop: 0,
          duration: 0
        })
        if (this.getMemberId) {
          const appInfo = this.$pt.getStorageSync('appInfo')
          if (this.getVeekrayStatus === 0 && this.getCustomerId === this.getMemberId && appInfo.defaultMemberId) {
            setMemberId(appInfo.defaultMemberId)
            this.$utils.setMyId(appInfo.defaultMemberId)
          }
          this.activeSub = 0
          this.listData = []
          this.finishedLine = false
          this.categoryTemplate()
          this.initMemberInfo()
        }
        this.listQuery.currentPage = 1
        this.listQuery.memberId = this.getMemberId
        this.listQuery.customerId = this.getCustomerId
        this.pullLoad.finished = false
      }
      // 清除自定义二级页缓存ID
      if (this.$pt.getStorageSync('secondPage')) {
        this.$pt.removeStorageSync('secondPage')
      }
    },
    onReachBottom() {
      // 触底刷新
      if (!this.pullLoad.finished) {
        this.categoryTemplate()
      }
    },
    // onPullDownRefresh() {
    //   this.resetQuery()
    //   this.categoryTemplate()
    //   setTimeout(() => {
    //     this.$pt.stopPullDownRefresh()
    //   }, 500)
    // },
    methods: {
      activeClick(index, item) {
        // 切换分类
        // 链接选择器分类跳转进入
        if (!this.finishedEls) {
          this.leftMenuClick = true
          this.$pt.removeStorageSync('categoryInfo')
          if (this.activeIndex === index) return
          this.resetQuery()
          this.activeIndex = index
          this.activeSub = 0
          if (item.categoryType === 1) {
            this.tempData.templateType = 1
          } else {
            this.tempData.templateType = this.currentTemp
          }
          this.initListCategory()
        }
      },
      tabSubShow() {
        this.subMore = !this.subMore
      },
      tabSubClick(e) {
        let index = e.mp.detail.index
        // this.activeSub = e.mp.detail.index
        this.currentCategory.categoryId = this.subTab[index].enterpriseCategoryId
        this.resetQuery()
        this.initGoodsList()
      },
      tabLayerShow() {
        this.tabLayer = true
        if (this.activeIndex === 0) {
          this.listCategory[0].show = true
        }
        this.setTabData(this.listCategory[this.activeIndex])
      },
      tabLayerHide() {
        this.tabLayer = false
      },
      tabLabelClick(item, index) {
        this.resetQuery()
        // van-tabs组件，change index修改后会自动执行事情
        this.leftMenuClick = false
        this.activeIndex = index
        // 选择分类全部时，清除分类缓存
        this.$pt.removeStorageSync('categoryInfo')
        if (this.listCategory.length === 0) return
        this.categoryId = this.listCategory[this.activeIndex].categoryId
        this.setTabData(item)
        this.tabLayer = false
        this.initListCategory()
      },
      tabClick(item, index) {
        this.resetQuery()
        this.activeIndex = index
        this.leftMenuClick = true
        // 清除分类缓存
        this.$pt.removeStorageSync('categoryInfo')
        this.setTabData(this.listCategory[this.activeIndex])
        this.initListCategory()
      },
      setTabData(item) {
        this.listCategory.forEach(itemOne => {
          itemOne.show = false
        })
        item.show = true
        const changeData = item.show
        this.$delete(item, 'show')
        this.$set(item, 'show', changeData)
      },
      subTabLayer(index, item) {
        this.activeSub = index
        this.subMore = false
        this.currentCategory.categoryId = this.subTab[this.activeSub].enterpriseCategoryId
        this.listQuery.currentPage = 1
        this.listData = []
      },
      scrollLower() {
        if (!this.pullLoad.finished) {
          this.initGoodsList()
        }
      },
      categoryTemplate() {
        categoryTemplate({
          memberId: this.getMemberId
        }).then((response) => {
          if (response.isError) return
          this.initListCategory()
          this.tempData = response.data
          // this.tempData.templateType = 4
          this.currentTemp = response.data.templateType
        }).catch(() => {
        })
      },
      initListCategory() {
        listOneGoodsCategory({
          memberId: this.getMemberId
        }).then((response) => {
          if (response.isError) return
          this.listCategory = response.data
          if (this.tempData.templateType === 5) {
            this.listCategory.unshift({
              categoryId: '',
              categoryName: '全部'
            })
            this.listCategory.forEach(item => {
              item.show = false
            })
          }
          // 当前超过数组长度
          if (this.activeIndex > this.listCategory.length - 1) {
            this.activeIndex = 0
          }
          if (this.listCategory.length > 0) {
            this.currentCategory.categoryId = this.listCategory[this.activeIndex].categoryId
            this.currentCategory.enterpriseCategoryId = this.listCategory[this.activeIndex].enterpriseCategoryId
            this.currentCategory.posterUrl = ''
            if (this.listCategory[this.activeIndex].posterUrl) {
              this.currentCategory.posterUrl = this.listCategory[this.activeIndex].posterUrl
            } else {
              this.currentCategory.posterUrl = null
            }
            this.currentCategory.categoryImage = ''
            if (this.listCategory[this.activeIndex].categoryImage) {
              this.currentCategory.categoryImage = this.listCategory[this.activeIndex].categoryImage
            } else {
              this.currentCategory.categoryImage = null
            }
            if (this.listCategory[this.activeIndex].linkType) {
              this.currentCategory.linkType = this.listCategory[this.activeIndex].linkType
              this.currentCategory.linkParams = this.listCategory[this.activeIndex].linkParams
            } else {
              this.currentCategory.linkType = null
              this.currentCategory.linkParams = null
            }
            // 链接选择器分类跳转进入
            if (this.leftMenuClick) {
              this.categoryId = this.listCategory[this.activeIndex].categoryId
            } else {
              if (this.listCategory.length === 0) return
              // 分类模板为5，链接选择器分类跳转进入，有问题，待处理（this.activeIndex = index会执行2次商品列表数据）
              this.currentCategory.categoryId = this.categoryId
              let indexOne = this.listCategory.findIndex(listItem => {
                return this.currentCategory.categoryId === listItem.categoryId
              })
              if (indexOne === -1) {
                this.activeIndex = 0
                this.currentCategory.categoryId = this.listCategory[0].enterpriseCategoryId
                this.currentCategory.enterpriseCategoryId = this.listCategory[0].enterpriseCategoryId
                this.$pt.removeStorageSync('categoryInfo')
                this.$utils.showToast({ title: '该分类下当前无商品，无法正常显示' })
              } else {
                // categoryInfo 链接选择器分类id，缓存跳转到指定的分类
                // 跳转到1级分类
                this.activeIndex = indexOne
                this.currentCategory.enterpriseCategoryId = this.listCategory[this.activeIndex].enterpriseCategoryId
                this.currentCategory.posterUrl = this.listCategory[this.activeIndex].posterUrl
              }
            }
            this.categoryNull = false
            this.subTab = []
            if (this.tempData.templateType !== 1 && this.tempData.templateType !== 5 && this.currentCategory.enterpriseCategoryId) {
              this.listNextCategoryByParentId()
            } else {
              this.initGoodsList()
            }
          } else {
            this.categoryNull = true
          }
        }).catch(() => {
        })
      },
      listNextCategoryByParentId() {
        if (this.tempData.templateType === 3 || this.tempData.templateType === 4) {
          this.shopSortNull = false
        }
        listNextCategoryByParentId({
          enterpriseCategoryId: this.currentCategory.enterpriseCategoryId
        }).then((response) => {
          if (response.isError) return
          this.subTab = response.data
          if (this.tempData.templateType === 2) {
            this.subTab.unshift({
              enterpriseCategoryId: this.subTab.length ? this.subTab[0].parentId : this.currentCategory.categoryId,
              categoryName: '全部'
            })
          }
          if (this.$pt.getStorageSync('categoryInfo').secondCategoryId) {
            // 如果存在链接跳转至2级分类
            let indexTwo = this.subTab.findIndex(listItem => {
              return this.$pt.getStorageSync('categoryInfo').secondCategoryId === listItem.enterpriseCategoryId
            })
            if (indexTwo === -1) {
              // categoryInfo 链接选择器分类id，不在分类列表里
              this.activeSub = 0
              this.currentCategory.categoryId = this.$pt.getStorageSync('categoryInfo').categoryId
              this.$pt.removeStorageSync('categoryInfo')
              this.$utils.showToast({ title: '该分类下当前无商品，无法正常显示' })
            } else {
              this.activeSub = indexTwo
              this.currentCategory.categoryId = this.$pt.getStorageSync('categoryInfo').secondCategoryId
              this.currentCategory.posterUrl = this.subTab[this.activeSub].posterUrl
            }
          }
          this.initGoodsList()
          if (this.tempData.templateType === 3) {
            let subArrTab = []
            this.subTab.forEach(item => {
              subArrTab.push({
                categoryId: item.categoryId,
                categoryImage: item.categoryImage,
                categoryLevel: item.categoryLevel,
                categoryName: item.categoryName,
                enterpriseCategoryId: item.enterpriseCategoryId,
                enterpriseId: item.enterpriseId,
                parentId: item.parentId,
                showFlag: item.showFlag
              })
            })
            // console.log('cate 33 11', this.currentCategory)
            // 手动添加全部分类
            subArrTab.unshift({
              categoryId: this.subTab.length ? this.subTab[0].parentId : this.currentCategory.categoryId, // 取父级的分类分类id
              categoryImage: this.currentCategory.categoryImage ? this.currentCategory.categoryImage : `${this.fileSpace}/images/all-category.png`, // 默认的图片
              // categoryLevel: 2, // 暂定
              categoryName: '全部',
              enterpriseCategoryId: this.subTab.length ? this.subTab[0].parentId : this.currentCategory.categoryId, // enterpriseCategoryId与categoryId一致
              parentId: this.subTab.length ? this.subTab[0].parentId : this.currentCategory.categoryId
            })
            this.subTab = [
              { children: [] }
            ]
            if (this.subTab.length) {
              this.subTab[0].children = subArrTab
            }
            if (this.subTab.length) {
              if (this.subTab[0].children.length === 0) {
                this.shopSortNull = true
              } else {
                this.shopSortNull = false
              }
            }
          }
          if (this.tempData.templateType === 4) {
            // 2级分类没有数据处理开始
            if (!this.subTab.length) {
              this.subTab = [
                { children: [] }
              ]
            }
            // console.log('cate 44 00', this.subTab)
            this.subTab.forEach(item => {
              if (!item.children || !item.categoryName) {
                item.children = []
              }
              item.children.unshift({
                categoryId: item.categoryName ? item.enterpriseCategoryId : this.currentCategory.categoryId, // 取父级的分类分类id
                categoryImage: item.categoryImage ? item.categoryImage : `${this.fileSpace}/images/all-category.png`, // 默认的图片
                categoryName: '全部',
                enterpriseCategoryId: item.categoryName ? item.enterpriseCategoryId : this.currentCategory.categoryId, // enterpriseCategoryId与categoryId一致
                parentId: item.categoryName ? item.parentId : this.currentCategory.categoryId
              })
            })
            if (this.subTab.length === 0) {
              this.shopSortNull = true
            } else {
              this.shopSortNull = false
            }
          }
        }).catch(() => {
        })
      },
      initGoodsList() {
        if (this.tempData.templateType === 3) return
        if (this.tempData.templateType === 4) return
        this.finishedLine = false
        this.shopSortNull = false
        this.pullLoad.finished = false
        this.listQuery.categoryId = this.currentCategory.categoryId
        // if (this.tempData.templateType === 2 && this.activeSub === 0 && !this.$pt.getStorageSync('categoryInfo')) {
        //   if (this.subTab.length) {
        //     this.listQuery.categoryId = this.subTab[0].enterpriseCategoryId
        //   }
        // }
        this.finishedEls = true
        // 批发小程序，没有自营分类，所以不需要categoryType参数请求
        pageProjectGoodsByMemberId(this.listQuery).then(response => {
          if (response.isError) return
          this.$pt.hideToast()
          this.dataNone = false
          this.shopSortNull = false
          response.data.records.forEach(item => {
            this.listData.push(item)
          })
          if (this.listData.length === 0) {
            this.dataNone = true
            this.shopSortNull = true
          }
          setTimeout(() => {
            this.finishedEls = false
          }, 100)
          // 翻页+1
          this.listQuery.currentPage++
          if (this.listData.length === 0 || this.listData.length >= response.data.total) {
            this.pullLoad.finished = true
          } else {
            this.pullLoad.finished = false
          }
          if (this.pullLoad.finished && this.listData.length > 7) {
            this.finishedLine = true
          }
        }).catch(() => {
        })
      },
      goShopAllPage(item) {
        let params = {
          categoryType: this.currentCategory.categoryType,
          categoryId: item.categoryId,
          enterpriseCategoryId: item.enterpriseCategoryId,
          upperEnterpriseCategoryId: item.parentId
        }
        this.$pt.navigateTo({ url: '/pages/shop/all-goods/main?fromType=1&params=' + JSON.stringify(params) })
      },
      linkTo() {
        let item = {
          linkType: this.currentCategory.linkType,
          linkParams: this.currentCategory.linkParams
        }
        if (item.linkType) {
          const linkType = Number(item.linkType)
          if (linkType === 1002) return
          if (linkType === 1004) {
            this.$pt.removeStorageSync('categoryInfo')
            setCategoryInfo(this.$utils.getCaption(item.linkParams))
            this.$pt.switchTab({ url: this.linkList[item.linkType] })
            return
          }
          if (linkType === 1005 || linkType === 1006 || linkType === 1007 || linkType === 1008) {
            this.$pt.switchTab({ url: this.linkList[item.linkType] })
            return
          }
          if (item.linkParams) {
            this.$pt.navigateTo({ url: this.linkList[item.linkType] + item.linkParams })
          } else {
            if (linkType === 1501) {
              this.$pt.navigateTo({ url: this.linkList[item.linkType] + '?enterpriseId=' + this.memberEnterpriseId })
            } else {
              this.$pt.navigateTo({ url: this.linkList[item.linkType] })
            }
          }
        }
      },
      getAuth() {
        this.$pt.login({
          success(res) {
            if (res.code) {
              getAuth(res.code).then((response) => {
                setShowBuyCard(response.data.showBuyCard)
              }).catch(() => {
              })
            }
          }
        })
      },
      pageTo(item) {
        this.pageLoad = false
        this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=30'})
      },
      // 会员基本信息
      initCustomerInfo() {
        getMemberInfo(this.getCustomerId).then((response) => {
          if (response.isError) return
          this.customerInfo = response.data
          if (response.data.enterpriseId) {
            setEnterpriseId(response.data.enterpriseId)
          }
        }).catch(() => {
        })
      },
      initMemberInfo() {
        // 如果缓存没有手机号码，则弹出微信授权手机号码
        this.initCustomerInfo()
        getMemberInfo(this.getMemberId).then((response) => {
          if (response.isError) return
          this.memberInfo = response.data
        }).catch(() => {
        })
      },
      resetQuery() {
        this.listData = []
        this.listQuery.currentPage = 1
        this.pullLoad.finished = false
        this.finishedLine = false
      }
    }
  }
</script>

<style scoped lang="less">
  .container{
    background: #f8f8f8;
    min-height: 100vh;
    .clear-li{
      padding: 0!important;
      margin: 0!important;
      width: 100%!important;
      font-size: 0;
      clear: both;
    }
    .category-nosetting {
      padding-top: 180px;
    }
    .horizontal-bar {
      width: 88%;
      height: 44px;
      white-space: nowrap;
      overflow-x: scroll;
      position: fixed;
      left: 0;
      z-index: 1;
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      .item-bar {
        display: inline-block;
        height: 44px;
        line-height: 44px;
        width: 72px;
        font-size: 16px;
        color: #333;
        text-align: center;
        overflow: hidden;
        .item-txt{
          display: inline-block;
          position: relative;
        }
        &--active {          
          font-weight: bold;
          .leftline {
            position: absolute;
            background: #fe7433;
            left: 0;
            bottom: 6px;
            height: 3px;
            width: 100%;
          }
        }
      }
    }
    .main {
      .left-bar {
        width: 91px;
        background: #f5f5f5;
        overflow-y: scroll;
        position: fixed;
        left: 0;
        z-index: 1;
        .item-bar {
          height: 50px;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 13px;
          color: #666;
          padding: 0 6px;
          overflow: hidden;
          &--active {
            background: white;
            color: #333;
            position: relative;
            font-weight: bold;
            font-size: 14px;
            // &:after {
            //   content: "";
            //   width: 3px;
            //   height: 18px;
            //   background: #ffc808;
            //   position: absolute;
            //   left: 0;
            //   top: 50%;
            //   margin-top: -9px;
            // }
            .leftline {
              position: absolute;
              left: 0;
              top: 50%;
              margin-top: -9px;
              height: 18px;
              width: 3px;
            }
          }
        }
      }
      .right-bar {
        background: white;
        width: calc(100% - 102px);
        padding-left: 11px;
        float: right;
        min-height: 100%;
        position: relative;
        .shop-bar {
          display: flex;
          justify-content: left;
          align-items: center;
          &:last-child {
            .content-item-box {
              border-bottom: unset;
            }
          }
          .img-item-box {
            .img-item {
              width: 80px;
              height: 80px;
            }
            .sell-out {
              position: absolute;
              width: 100%;
              height: 100%;
              left: 0;
              top: 0;
              display: flex;
              justify-content: center;
              align-items: center;
              overflow: hidden;
              color: rgba(254, 254, 254, 0.7);
              background: rgba(0, 0, 0, 0.5);
              font-size: 12px;
              .del-layer {
                border-radius: 50%;
                border: 1px solid white;
                justify-content: center;
                width: 60px;
                height: 60px;
              }
              .delete-css {
                position: absolute;
                transform: rotate(-45deg);
                background: rgba(255, 255, 255, 0.58);
                height: 20px;
                line-height: 20px;
                font-size: 12px;
                width: 100%;
                text-align: center;
                color: #000;
              }
            }
          }
          .content-item-box {
            width: 172px;
            height: 85px;
            padding: 18px 11px 0px 0;
            margin-left: 10px;
            border-bottom: 0.5px solid #f6f6f6;
            .content-title {
              font-size: 14px;
              line-height: 18px;
              color: #333;
            }
            .content-foot {
              margin-top: 10px;
              .self-buy {
                height: 15px;
                text-align: center;
                display: flex;
                justify-content: left;
                align-items: center;
                .self-buy-left {
                  background: #ffe200;
                  font-size: 10px;
                  color: #333;
                  padding: 0 4px;
                }
                .self-buy-right {
                  background: #000000;
                  font-size: 10px;
                  color: #fff;
                  padding: 0 4px;
                }
              }
              .price-row {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .price-box {
                  display: flex;
                  justify-content: left;
                  align-items: flex-end;
                  .price {
                    font-size: 18px;
                    color: #ff593e;
                    line-height: 1;
                  }
                  .old-parice {
                    font-size: 12px;
                    color: #333;
                    text-decoration: line-through;
                    margin-left: 5px;
                    line-height: 1;
                  }
                }
              }
            }
          }
        }
        .nodata {
          padding-top: 50px;
        }
      }
    }
    .sub-tab {
      width: calc(100% - 91px);
      overflow: hidden;
      border-bottom: #f6f6f6 1px solid;
      padding-right: 36px;
      box-sizing: border-box;
      position: fixed;
      top: 0px;
      right: 0px;
      z-index: 151;
      .tab-more {
        width: 36px;
        height: 49px;
        position: absolute;
        right: 0;
        top: 0px;
        z-index: 152;
        background: #fff;
        .rotate {
          transform: rotate(180deg);
        }
      }
      /deep/ .van-tabs__line {
        // display: none;
      }
      /deep/ .van-tab.van-tab--active {
        // color: #febf00;
      }
      /deep/ .van-tab {
        color: #000;
        line-height: 50px;
        padding: 0 !important;
        -webkit-flex: 0 0 29% !important;
        flex: 0 0 29% !important;
      }
      /deep/ .van-tabs--line .van-tabs__wrap {
        height: 50px;
        border-bottom: none !important;
      }
      /deep/ .van-tabs__wrap::after,
      .van-tabs__wrap::before {
        display: none !important;
      }
    }
    .sub-tab-layer {
      .sub-layer-bg {
        width: calc(100% - 102px);
        height: 100%;
        position: fixed;
        top: 0px;
        right: 0px;
        z-index: 122;
        background: rgba(0, 0, 0, 0.5);
      }
      ul {
        padding-bottom: 4px;
        background: #fff;
        width: calc(100% - 102px);
        position: fixed;
        top: 0px;
        right: 0px;
        z-index: 123;
        &:after {
          content: '';
          display: block;
          clear: both;
          font-size: 0;
        }
        li {
          width: 28%;
          float: left;
          text-align: center;
          color: #666;
          background: #f3f3f3;
          border: #f5f5f5 1px solid;
          margin: 5px 2%;
          padding: 10px 0;
          line-height: 1;
          border-radius: 10em;
          &.actived {
            background: #fffae1;
            color: #febf00;
            border: #ffeb7b 1px solid;
          }
        }
      }
    }
    .img-top-scr {
      width: 100%;
    }
    .min-short-w {
      max-width: 85px;
      height: 20px;
      line-height: 1.3;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }
    .cate-price {
      height: 19px !important;
    }
    .temp-subcat-list {
      h2 {
        font-size: 15px;
        font-weight: bold;
      }
      ul {
        &:after {
          content: '';
          display: block;
          clear: both;
          font-size: 0;
        }
        li {
          width: 28.3%;
          float: left;
          text-align: center;
          margin: 0 5% 0 0;
          padding-bottom: 8px;
          span {
            display: block;
            background: #e5e5e5;
          }
        }
      }
    }
    .header-nav-other{
      .home-bar{
        padding-top: 3px!important;
      }
    }
    .home-header-nav{
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      z-index: 100;
    }
    /deep/ .van-tabs__scroll{
      background: none;
    }
    /deep/ .van-tab{
      color: #fff;
      font-size: 14px;
      padding: 0;
    }
    /deep/ .van-tab--active{
      color: #fff;
      font-size: 15px;
      font-weight: bold;
    }
    /deep/ .van-tabs__line{
      bottom: 5px;
    }    
    .home-bar{      
      color: #919191;
      background: #fff;
      min-height: 40px;
      padding-top: 6px;
      box-sizing: border-box;
      position: relative;
      z-index: 5;
      // &.layer-on{
      //   background: #fff!important;
      //   .home-search{
      //     background: #f6f6f6;
      //   }
      // }
      .home-search{
        background: #f6f6f6;
        border-radius: 13px;
        height: 34px;
      }
    }
    .tab-menu{
      background: #fff;
      min-height: 42px;
      padding-right: 45px;
      box-sizing: border-box;
      width: 100%;
      position: relative;
      z-index: 10;
      .tab-more{
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 2px;
        z-index: 11;
        background-size: 40px 40px!important;
        &.tab-more-and{
          top: 3px;
        }
      }
    }
    .tab-layer{
      background: #fff;
      background-size: 375px 42px!important;
      position: absolute;
      left: 0;
      top: 0px;
      z-index: 25;
      width: 100%;
      .icon-arrow-right{
        transform:rotate(-90deg);
      }
      ul{
        margin-top: -5px;
        padding-bottom: 12px;
        &:after{
          content: '';
          display: block;
          clear: both;
          font-size: 0;
        }
        li{
          width: 21%;
          float: left;
          text-align: center;
          background: #f7f5f6;
          margin: 5px 2%;
          padding: 10px 0;
          line-height: 1;
          border-radius: 10em;
          &.actived{
            background: linear-gradient(to right, #ff9345, #ff6c37);
            color: #fff;
          }
        }
      }
    }
    .tab-layer-bg{
      position: fixed;
      left: 0;
      top: 0px;
      z-index: 3;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.3);
    }
    .nodata{
      margin: 80px 0 0 0;
      text-align: center;
      img{
        margin: 0 auto;
      }
    }
  }
  .module-box{  
    .title-bar{
      h2{
        margin: 0;
        padding: 0;
      }
    }
    ul{
      padding: 0;
      margin: 0; 
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      li{
        list-style-type: none;
        background: #fff;
        border-radius: 6px;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0px;
        }
        .detail-box{
          padding: 10px 10px 0 10px;
        }
        .pic-box{
          position: relative;
          z-index: 1;
          .img-main{
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
          }
          .del-layer-bg{
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 5;
          }
          .del-layer{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            text-align: center;
            color: #fff;
            display: block;
            label{
              width: 58px;
              height: 58px;
              line-height: 1;
              margin-top: 25%;
              font-size: 15px;                  
              // background: rgba(4, 4, 4, 0.6);
              border: rgba(255, 255, 255, 0.6) 1px solid;
              border-radius: 100px;            
              display: inline-block;
              span{
                display: block;
                margin-top: 16px;
              }
              i{
                display: block;
                margin-top: 3px;
                color: rgba(255, 255, 255, 0.8);
              }
            }
            p{
              display: block;
              font-size: 10px;
              margin-top: 5%;
            }
          }
        }        
        .tag-number{
          background: #ffeee6;
          color: #FE7329;
          line-height: 1;
          display: inline-block;
        }
        .desc{
          height: 20px;
          line-height: 1.3;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient:vertical;
          word-break:break-word;
        }
        .price{
          color: #FF5742;
        }
        p{
          color: #A8A8A8;
        }
      }
    }
  }
</style>
